<template>
    <div>
        <div class="clearfix">
            <span class="left-align" style="font-size: 30px; font-weight: bold">
                {{ processOccupation.occupationName }}
                <i
                    class="el-icon-money"
                    style="margin-left: 2vw; font-size: 20px"
                    >{{ processOccupation.occupationSalary }}</i
                >
            </span>

            <span class="right-align">
                <el-button type="primary" @click="goToUserPage">投递</el-button>
                <el-button type="primary" @click="goToUserPage">
                    立即沟通
                </el-button>
            </span>
        </div>
        <div class="clearfix">
            <span>
                <i class="el-icon-reading">{{
                    processOccupation.occupationDegree
                }}</i>
                <i class="el-icon-suitcase-1" style="margin-left: 2vw">{{
                    processOccupation.occupationExperience
                }}</i>
                <i
                    class="el-icon-location-information"
                    style="margin-left: 2vw"
                    >{{ processOccupation.cityName }}</i
                >
            </span>
            <span>
                <i class="el-icon-phone"></i>
                {{ processOccupation.enterpriseTel }}
            </span>
        </div>
        <div class="clearfix">
            <i class="el-icon-location">{{
                processOccupation.occupationLocation
            }}</i>
        </div>
        <div class="clearfix">
            <h2>职位描述</h2>
        </div>
        <div class="clearfix">
            <el-input
                v-model="processOccupation.occupationProfile"
                type="textarea"
                :rows="15"
                readonly
            ></el-input>
        </div>
        <div class="clearfix">
            <h2>{{ processOccupation.enterpriseName }}</h2>
        </div>
        <div class="clearfix">
            <i class="el-icon-location">{{
                processOccupation.enterpriseLocation
            }}</i>
        </div>
        <div class="clearfix">
            <h3>企业概况</h3>
        </div>
        <div class="clearfix">
            <el-input
                v-model="processOccupation.enterpriseProfile"
                type="textarea"
                :rows="15"
                readonly
            ></el-input>
        </div>
    </div>
</template>

<script>
import { Message } from 'element-ui'
export default {
    data() {
        return {
            occupation: {
                occupationId: '',
                occupationName: '',
                occupationCategory: '',
                occupationCity: '',
                occupationLocation: '',
                occupationProfile: '',
                occupationDegree: '',
                occupationExperience: '',
                occupationSalary: '',
                occupationEnterprise: '',
                cityName: '',
                enterpriseName: '',
                enterpriseProfile: '',
                enterpriseLocation: '',
                enterpriseTel: '',
                categoryName: ''
            },
            formData: {
                occupationId: ''
            }
        }
    },
    computed: {
        listenSearchOccupationId() {
            return this.$store.state.seekerSearchOccupationId
        },
        processOccupation() {
            let experienceText
            const experience = Number(this.occupation.occupationExperience)

            if (experience === 0) {
                experienceText = '不限'
            } else if (experience === -1) {
                experienceText = '应届生'
            } else {
                experienceText = experience + '年经验'
            }

            this.occupation.occupationExperience = experienceText

            return this.occupation
        }
    },
    created() {
        this.formData.occupationId = this.$store.state.seekerSearchOccupationId
    },
    mounted() {
        this.$axios
            .post('/occupation/occupationDetail', this.formData)
            .then((resp) => {
                this.occupation = resp.data
            })
    },
    watch: {
        listenSearchOccupationId: {
            handler() {
                this.formData.occupationId =
                    this.$store.state.seekerSearchOccupationId
                this.showOccupation()
            },
            deep: true
        }
    },
    methods: {
        showOccupation() {
            this.$axios
                .post('/occupation/occupationDetail', this.formData)
                .then((resp) => {
                    this.occupation = resp.data
                    Message({
                        message: `Card ${this.occupation.data} ${this.formData.occupationId} clicked!`,
                        type: 'success'
                    })
                })
        }
    }
}
</script>

<style  scoped>
.clearfix {
    display: flex;
    justify-content: space-between;
    margin: 0 2vw;
    margin-top: 2vh;
}

.right-align {
    text-align: right;
}

.left-align {
    text-align: left;
}
</style>
